import React from 'react';
import { IContext } from 'beta/typings/context';
import ServiceWrapper from 'beta/containers/layout/ServiceWrapper';
import { Box, getColor, Pill } from '@nova-hf/ui';
import Table from 'components/table/Table';
import TableHead from 'components/table/TableHead';
import TableCell from 'components/table/TableCell';
import TableBody from 'components/table/TableBody';
import TableRow from 'components/table/TableRow';
import { formatDate, formatPrice } from 'beta/utils/helpers';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import { useTranslation } from 'utils/i18n';
import { useContractsperiodsQuery, useContractsQuery } from 'typings/graphql';
import { orderBy } from 'lodash';
import { useRouter } from 'next/router';

const GreidsluSaga = () => {
  const color = 'pink';
  const { t } = useTranslation('subscription');
  const router = useRouter();
  const { data: contractsData } = useContractsQuery({
    variables: {
      input: {
        serviceId: (router.query.serviceId as string) ?? '',
      },
    },
  });
  const getIds = contractsData?.contracts?.contracts?.map((contract: any) => {
    return contract?.id;
  });

  const { data } = useContractsperiodsQuery({
    variables: {
      input: {
        contractIds: getIds?.toString(),
      },
    },
  });

  const periods = data?.contractsPeriods;

  return (
    <ServiceWrapper>
      {periods && (
        <Table>
          <TableHead>
            <TableCell>{t('payments.name')}</TableCell>
            <TableCell>{t('payments.date')}</TableCell>
            <TableCell>{t('payments.amount')}</TableCell>
            <TableCell align="right">{t('payments.statusTitle')}</TableCell>
          </TableHead>
          <TableBody>
            {orderBy(periods, ['order.created'], ['desc']).map((period) => {
              return (
                <TableRow key={period?.id}>
                  <TableCell>{'Áskrift'}</TableCell>
                  <TableCell>
                    <Box display="inline-flex">{formatDate(period?.periodEnd, 'dd.MM.yyyy')}</Box>
                  </TableCell>
                  <TableCell>{period?.amount ? formatPrice(period?.amount) : '0 kr.'}</TableCell>
                  <TableCell align="right">
                    <Pill
                      color={period?.status === 'Paid' ? 'green' : 'warning'}
                      text={period?.status === 'Paid' ? 'Greitt' : 'Ógreitt'}
                    />
                    <br />
                    {period?.status !== 'Paid' && (
                      <LinkWrapper
                        href={`https://nova.is/barinn/greidsla/ogreidd-pontun/${period?.id}`}
                        target="_blank"
                        style={{ color: getColor(color) }}
                      >
                        {t('payments.linkText')}
                      </LinkWrapper>
                    )}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      )}
    </ServiceWrapper>
  );
};

GreidsluSaga.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    serviceId: query.serviceId,
    namespacesRequired: [],
  };
};

export default GreidsluSaga;